
<template>
  <div class="StagingBox">
    <!-- 头部 -->
    <div class="header">
      <div class="header_left">
        <b>工作台</b>
        <ul>
          <img
            src="https://ts1.cn.mm.bing.net/th/id/R-C.12c0bb401dc06daa7485c9d276f1ee12?rik=KkwX2M%2fvb9llEA&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f7%2f6b%2f15c50272d1.jpg&ehk=FLxYEFKlSwb0IFZowJrct68bhutCekNjdlanSHyN12g%3d&risl=&pid=ImgRaw&r=0"
            alt=""
          />
          <li>
            <b>早安，白敬亭，祝你开心每一天！</b>
            <p>钦乘科技-南京分公司-销售部-销售总监</p>
          </li>
        </ul>
      </div>
      <div class="header_right">
        <ul>
          <li>
            <p>待审批</p>
            <b>13</b>
          </li>
          <li>
            <p>待分配</p>
            <b>13</b>
          </li>
          <li>
            <p>消息</p>
            <b>13</b>
          </li>
        </ul>
      </div>
    </div>
    <!-- 数量模块 -->
    <div class="number">
      <div class="num_item" v-for="item in numList" :key="item.id">
        <img :src="item.imgUrl" alt="" />
        <ul>
          <li>
            <p>{{ item.title }}</p>
            <b>{{ item.num }}</b>
          </li>
        </ul>
      </div>
    </div>
    <div class="echarts">
      <div class="e_left">
        <div
          id="mainss"
          style="width: 88%; height: 95%; margin-top: 20px"
        ></div>
      </div>
      <div class="e_right">
        <b>待办提醒</b>
        <div class="right_item">
          <ul>
            <li>
              <b>10</b>
              <p>待审核签约申请</p>
            </li>
            <li>
              <span></span>
            </li>
          </ul>
        </div>
        <div class="right_item">
          <ul>
            <li>
              <b>30</b>
              <p>待审核服务申请</p>
            </li>
            <li>
              <span></span>
            </li>
          </ul>
        </div>
        <div class="right_item">
          <ul>
            <li>
              <b>7</b>
              <p>待完成服务</p>
            </li>
            <li>
              <span></span>
            </li>
          </ul>
        </div>
        <div class="right_item">
          <ul>
            <li>
              <b>107</b>
              <p>待回复消息</p>
            </li>
            <li>
              <span></span>
            </li>
          </ul>
        </div>
        <div class="right_item">
          <ul>
            <li>
              <b>23</b>
              <p>待处理续约</p>
            </li>
            <li>
              <span></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="people">
      <div class="p_left">
        <b>居民标签</b>
        <div class="left_main">
          <div class="left_content">
            <p>高血压</p>
            <span>200</span>
          </div>
          <el-progress :percentage="25" :show-text="false" :stroke-width="9">
          </el-progress>
          <div class="left_content">
            <p>冠心病</p>
            <span>120</span>
          </div>
          <el-progress :percentage="70" :show-text="false" :stroke-width="9">
          </el-progress>
          <div class="left_content">
            <p>高血糖</p>
            <span>40</span>
          </div>
          <el-progress :percentage="55" :show-text="false" :stroke-width="9">
          </el-progress>
          <div class="left_content">
            <p>高血脂</p>
            <span>30</span>
          </div>
          <el-progress :percentage="32" :show-text="false" :stroke-width="9">
          </el-progress>
          <div class="left_content">
            <p>慢病护理</p>
            <span>110</span>
          </div>
          <el-progress :percentage="25" :show-text="false" :stroke-width="9">
          </el-progress>
          <div class="left_content">
            <p>多动症</p>
            <span>88</span>
          </div>
          <el-progress :percentage="18" :show-text="false" :stroke-width="9">
          </el-progress>
        </div>
      </div>
      <div class="p_right">
        <b>居民指标异常</b>
        <div class="right_all">
          <div class="right_content">
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.cec4eafeeb6c28cdb5a0e192be8fc654?rik=RcJdGzmO6%2bAlHQ&riu=http%3a%2f%2fimg.yao51.com%2fjiankangtuku%2furwurhatx.jpeg&ehk=S6ivdhlWsTZLP8ijo%2fhM3uH0DD9VsmnXoRRCrPDrO7w%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
            <ul>
              <li>
                <p>懒羊羊</p>
                <span
                  >26岁
                  <svg
                    t="1681462477202"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1422"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M833.96 779.12l82.62-82.62c15.21-15.21 15.21-39.85 0-55.07-15.21-15.21-39.85-15.21-55.07 0l-82.62 82.62-56.71-56.71c49.66-61.89 76.76-138.16 76.76-218.64 0-93.6-36.46-181.63-102.68-247.8C630.1 134.68 542.08 98.23 448.48 98.23s-181.63 36.46-247.8 102.68C134.46 267.08 98 355.1 98 448.7s36.46 181.63 102.68 247.8c66.17 66.22 154.19 102.68 247.8 102.68 80.48 0 156.75-27.11 218.64-76.76l56.71 56.71-82.62 82.62c-15.21 15.21-15.21 39.85 0 55.07 7.61 7.61 17.54 11.41 27.53 11.41s19.93-3.8 27.53-11.41l82.62-82.62 82.62 82.62c7.61 7.61 17.54 11.41 27.53 11.41s19.93-3.8 27.53-11.41c15.21-15.21 15.21-39.85 0-55.07l-82.61-82.63zM255.75 641.43c-51.52-51.47-79.86-119.92-79.86-192.73s28.34-141.26 79.86-192.73c51.47-51.52 119.92-79.86 192.73-79.86s141.26 28.34 192.73 79.86c51.52 51.47 79.86 119.92 79.86 192.73s-28.34 141.26-79.86 192.73c-51.47 51.52-119.92 79.86-192.73 79.86s-141.27-28.34-192.73-79.86z"
                      fill="#0081FF"
                      p-id="1423"
                    ></path></svg
                ></span>
              </li>
              <li>
                <svg
                  t="1681462437962"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1283"
                  width="22"
                  height="22"
                >
                  <path
                    d="M47.010909 512c0 256.837818 208.151273 464.989091 464.989091 464.989091s464.989091-208.151273 464.989091-464.989091S768.884364 47.010909 512 47.010909 47.010909 255.115636 47.010909 512z"
                    fill="#FFAB69"
                    p-id="1284"
                  ></path>
                  <path
                    d="M479.185455 610.490182V293.143273c0-16.384 16.384-32.814545 32.814545-32.814546s32.814545 16.430545 32.814545 32.814546v317.346909c0 16.384-16.384 32.814545-32.814545 32.814545s-32.814545-16.430545-32.814545-32.814545zM479.185455 730.856727a32.814545 32.814545 0 1 0 65.62909 0 32.814545 32.814545 0 0 0-65.62909 0z"
                    fill="#FFFFFF"
                    p-id="1285"
                  ></path></svg
                ><a href="">血糖过高</a>
              </li>
              <li>
                <button>查看详情</button>
              </li>
            </ul>
          </div>
          <div class="right_content">
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.cec4eafeeb6c28cdb5a0e192be8fc654?rik=RcJdGzmO6%2bAlHQ&riu=http%3a%2f%2fimg.yao51.com%2fjiankangtuku%2furwurhatx.jpeg&ehk=S6ivdhlWsTZLP8ijo%2fhM3uH0DD9VsmnXoRRCrPDrO7w%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
            <ul>
              <li>
                <p>懒羊羊</p>
                <span
                  >26岁
                  <svg
                    t="1681462477202"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1422"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M833.96 779.12l82.62-82.62c15.21-15.21 15.21-39.85 0-55.07-15.21-15.21-39.85-15.21-55.07 0l-82.62 82.62-56.71-56.71c49.66-61.89 76.76-138.16 76.76-218.64 0-93.6-36.46-181.63-102.68-247.8C630.1 134.68 542.08 98.23 448.48 98.23s-181.63 36.46-247.8 102.68C134.46 267.08 98 355.1 98 448.7s36.46 181.63 102.68 247.8c66.17 66.22 154.19 102.68 247.8 102.68 80.48 0 156.75-27.11 218.64-76.76l56.71 56.71-82.62 82.62c-15.21 15.21-15.21 39.85 0 55.07 7.61 7.61 17.54 11.41 27.53 11.41s19.93-3.8 27.53-11.41l82.62-82.62 82.62 82.62c7.61 7.61 17.54 11.41 27.53 11.41s19.93-3.8 27.53-11.41c15.21-15.21 15.21-39.85 0-55.07l-82.61-82.63zM255.75 641.43c-51.52-51.47-79.86-119.92-79.86-192.73s28.34-141.26 79.86-192.73c51.47-51.52 119.92-79.86 192.73-79.86s141.26 28.34 192.73 79.86c51.52 51.47 79.86 119.92 79.86 192.73s-28.34 141.26-79.86 192.73c-51.47 51.52-119.92 79.86-192.73 79.86s-141.27-28.34-192.73-79.86z"
                      fill="#0081FF"
                      p-id="1423"
                    ></path></svg
                ></span>
              </li>
              <li>
                <svg
                  t="1681462437962"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1283"
                  width="22"
                  height="22"
                >
                  <path
                    d="M47.010909 512c0 256.837818 208.151273 464.989091 464.989091 464.989091s464.989091-208.151273 464.989091-464.989091S768.884364 47.010909 512 47.010909 47.010909 255.115636 47.010909 512z"
                    fill="#FFAB69"
                    p-id="1284"
                  ></path>
                  <path
                    d="M479.185455 610.490182V293.143273c0-16.384 16.384-32.814545 32.814545-32.814546s32.814545 16.430545 32.814545 32.814546v317.346909c0 16.384-16.384 32.814545-32.814545 32.814545s-32.814545-16.430545-32.814545-32.814545zM479.185455 730.856727a32.814545 32.814545 0 1 0 65.62909 0 32.814545 32.814545 0 0 0-65.62909 0z"
                    fill="#FFFFFF"
                    p-id="1285"
                  ></path></svg
                ><a href="">血糖过高</a>
              </li>
              <li>
                <button>查看详情</button>
              </li>
            </ul>
          </div>
          <div class="right_content">
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.cec4eafeeb6c28cdb5a0e192be8fc654?rik=RcJdGzmO6%2bAlHQ&riu=http%3a%2f%2fimg.yao51.com%2fjiankangtuku%2furwurhatx.jpeg&ehk=S6ivdhlWsTZLP8ijo%2fhM3uH0DD9VsmnXoRRCrPDrO7w%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
            <ul>
              <li>
                <p>懒羊羊</p>
                <span
                  >26岁
                  <svg
                    t="1681462477202"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1422"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M833.96 779.12l82.62-82.62c15.21-15.21 15.21-39.85 0-55.07-15.21-15.21-39.85-15.21-55.07 0l-82.62 82.62-56.71-56.71c49.66-61.89 76.76-138.16 76.76-218.64 0-93.6-36.46-181.63-102.68-247.8C630.1 134.68 542.08 98.23 448.48 98.23s-181.63 36.46-247.8 102.68C134.46 267.08 98 355.1 98 448.7s36.46 181.63 102.68 247.8c66.17 66.22 154.19 102.68 247.8 102.68 80.48 0 156.75-27.11 218.64-76.76l56.71 56.71-82.62 82.62c-15.21 15.21-15.21 39.85 0 55.07 7.61 7.61 17.54 11.41 27.53 11.41s19.93-3.8 27.53-11.41l82.62-82.62 82.62 82.62c7.61 7.61 17.54 11.41 27.53 11.41s19.93-3.8 27.53-11.41c15.21-15.21 15.21-39.85 0-55.07l-82.61-82.63zM255.75 641.43c-51.52-51.47-79.86-119.92-79.86-192.73s28.34-141.26 79.86-192.73c51.47-51.52 119.92-79.86 192.73-79.86s141.26 28.34 192.73 79.86c51.52 51.47 79.86 119.92 79.86 192.73s-28.34 141.26-79.86 192.73c-51.47 51.52-119.92 79.86-192.73 79.86s-141.27-28.34-192.73-79.86z"
                      fill="#0081FF"
                      p-id="1423"
                    ></path></svg
                ></span>
              </li>
              <li>
                <svg
                  t="1681462437962"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1283"
                  width="22"
                  height="22"
                >
                  <path
                    d="M47.010909 512c0 256.837818 208.151273 464.989091 464.989091 464.989091s464.989091-208.151273 464.989091-464.989091S768.884364 47.010909 512 47.010909 47.010909 255.115636 47.010909 512z"
                    fill="#FFAB69"
                    p-id="1284"
                  ></path>
                  <path
                    d="M479.185455 610.490182V293.143273c0-16.384 16.384-32.814545 32.814545-32.814546s32.814545 16.430545 32.814545 32.814546v317.346909c0 16.384-16.384 32.814545-32.814545 32.814545s-32.814545-16.430545-32.814545-32.814545zM479.185455 730.856727a32.814545 32.814545 0 1 0 65.62909 0 32.814545 32.814545 0 0 0-65.62909 0z"
                    fill="#FFFFFF"
                    p-id="1285"
                  ></path></svg
                ><a href="">血糖过高</a>
              </li>
              <li>
                <button>查看详情</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="tab">
      <b>本周签约情况</b>
      <el-table
        :data="tableData"
        stripe
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
        class="tables"
        
      >
        <el-table-column
          prop="team"
          label="团队名称"
          width="200"
          class="tab_tr"
          align="center"
        />
        <el-table-column
          prop="day"
          label="2023-04-10"
          width="200"
          class="tab_tr"
          align="center"
        />
        <el-table-column
          prop="day2"
          label="2023-04-11"
          width="200"
          class="tab_tr"
        />
        <el-table-column
          prop="day3"
          label="2023-04-12"
          width="200"
          class="tab_tr"
        />
        <el-table-column
          prop="day4"
          label="2023-04-13"
          width="200"
          class="tab_tr"
        />
        <el-table-column
          prop="day5"
          label="2023-04-14"
          width="200"
          class="tab_tr"
        />
        <el-table-column
          prop="day6"
          label="2023-04-15"
          width="200"
          class="tab_tr"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";
import * as echarts from "echarts";
import Img1 from "../../../../src/assets/StagImg/2.png";
import Img2 from "../../../../src/assets/StagImg/1.png";
import Img3 from "../../../../src/assets/StagImg/3.png";
import Img4 from "../../../../src/assets/StagImg/4.png";
import Img5 from "../../../../src/assets/StagImg/sex.png";
import Img6 from "../../../../src/assets/StagImg/sex2.png";
import Img7 from "../../../../src/assets/StagImg/warning.png";

export default {
  name: "OldHomeSystemmanage",
  setup() {
    const numList = reactive([
      {
        id: 1,
        title: "居民总数量",
        imgUrl: Img1,
        num: 11000,
      },
      {
        id: 2,
        title: "居民总数量",
        imgUrl: Img2,
        num: 56000,
      },
      {
        id: 3,
        title: "居民总数量",
        imgUrl: Img3,
        num: 11000,
      },
      {
        id: 4,
        title: "居民总数量",
        imgUrl: Img4,
        num: 89000,
      },
    ]);
    // 定义居民
    const sex = Img5;
    const Warning = Img7;
    // 定义表格
    const tableData = [
      {
        team: "李明明团队",
        day: 95,
        day2: 89,
        day3: 105,
        day4: 59,
        day5: 99,
        day6: 152,
      },
      {
        team: "李明明团队",
        day: 78,
        day2: 88,
        day3: 420,
        day4: 45,
        day5: 89,
        day6: 130,
      },
      {
        team: "李明明团队",
        day: 105,
        day2: 150,
        day3: 85,
        day4: 96,
        day5: 100,
        day6: 132,
      },
      {
        team: "李明明团队",
        day: 96,
        day2: 79,
        day3: 106,
        day4: 500,
        day5: 210,
        day6: 220,
      },
    ];
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("mainss"));
      myChart.setOption({
        title: {
          text: "数据概况",
        },
        // 显示图例
        tooltip: {
          trigger: "axis",
        },
        color: ["#2984F8", "#3ED59F", "#FA746B"],
        // 图例名称
        legend: {
          data: ["居民数量", "签约量", "服务量"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "居民数量",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "签约量",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "服务量",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      });
      window.onresize = function () {
        myChart.resize();
      };
    });
    return {
      numList,
      sex,
      Warning,
      tableData,
    };
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.StagingBox {
  background: rgb(241, 240, 240);
  border-radius: 10px;
  padding: 10px 10px;
  .header {
    height: 200px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    display: flex;
    .header_left {
      flex: 1;
      b {
        display: block;
        font-size: 32px;
        padding-top: 10px;
        padding-left: 15px;
      }

      ul {
        display: flex;
        margin-top: 27px;
        padding-left: 15px;
        img {
          width: 90px;
          height: 90px;
          border-radius: 50%;
        }
        li {
          margin-left: 20px;
          b {
            display: block;
            font-size: 21px;
            letter-spacing: 2px;
            padding-left: 0px;
          }
          p {
            color: #999;
            font-size: 17px;
            margin-top: 15px;
            font-weight: 600;
            letter-spacing: 3px;
          }
        }
      }
    }
    .header_right {
      width: 350px;
      margin-right: 15px;
      // background: pink;
      ul {
        display: flex;
        margin-top: 20px;
        li:nth-child(1) {
          border-left: none;
        }
        li {
          width: 130px;
          height: 60px;
          border-left: 1px solid rgb(211, 211, 211);
          text-align: right;
          padding-right: 30px;
          p {
            font-size: 18px;
            font-weight: 600;
            color: #414141;
            letter-spacing: 2px;
          }
          b {
            display: block;
            margin-top: -10px;
            font-weight: blod;
            font-size: 20px;
          }
        }
      }
    }
  }
  .number {
    height: 170px;
    // background: rgb(241, 241, 241);
    display: flex;
    .num_item {
      display: flex;
      width: 24.1%;
      justify-content: space-around;
      background: #fff;
      margin-left: 10px;
      border-radius: 10px;
      margin: 12px 8px;
      padding: 0;
      img {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        margin-top: 30px;
        margin-left: 20px;
        margin-right: 20px;
      }
      ul {
        flex: 1;
        margin-right: 10px;
        // background: rgb(232, 61, 89);
        margin-top: 30px;
        padding: 0;
        li {
          list-style: none;
          p {
            color: #999;
            font-size: 16px;
            font-weight: 500;
            margin-top: 5px;
          }
          b {
            display: block;
            color: #2984f8;
            font-size: 32px;
            margin-top: -7px;
          }
        }
      }
    }
  }
  .echarts {
    height: 530px;
    // background: #2984f8;
    display: flex;
    border-radius: 10px;
    .e_left {
      flex: 3;
      margin-right: 5px;
      border-radius: 10px;
      background: #fff;
    }
    .e_right {
      flex: 1;
      margin-left: 5px;
      border-radius: 10px;
      background: #fff;
      padding: 10px 10px;
      b {
        display: block;
        font-size: 17px;
        letter-spacing: 2px;
        padding-bottom: 12px;
      }
      .right_item {
        ul {
          display: flex;
          // background: orange;
          margin: 0;
          li:nth-child(2) {
            span {
              display: block;
              width: 14px;
              height: 14px;
              margin-top: 8%;
              border-radius: 50%;
              margin-left: 80%;
              background: #97c974;
            }
          }
          li {
            width: 100%;
            border-top: 1px solid rgb(228, 228, 228);
            border-bottom: 1px solid rgb(228, 228, 228);
            padding: 7px 20px;
            b {
              font-size: 19px;
              color: #5e5e5e;
            }
            p {
              color: #999;
              font-size: 15px;
              letter-spacing: 2px;
            }
          }
        }
      }
    }
  }
  .people {
    height: 530px;
    // background: #2984f8;
    display: flex;
    border-radius: 10px;
    margin-top: 10px;
    .p_left {
      flex: 1.5;
      margin-right: 5px;
      border-radius: 10px;
      background: #fff;
      //   background: rgb(220, 112, 112);
      padding: 12px 20px;
      b {
        display: block;
        font-size: 18px;
        letter-spacing: 2px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgb(216, 216, 216);
      }
      .left_main {
        margin-top: 20px;
        .left_content {
          display: flex;
          //   background: orange;
          width: 100%;
          height: 60px;
          font-size: 16px;
          padding: 0px 15px;
          p {
            padding-top: 21px;
            flex: 1;
            color: #999;
          }
          span {
            display: block;
            width: 40px;
            text-align: right;
            margin-top: 22px;
            // background: pink;
            font-size: 17px;
            color: #414141;
          }
        }
      }
    }
    .p_right {
      flex: 3;
      margin-left: 5px;
      border-radius: 10px;
      //   background: rgb(172, 248, 230);
      background: #fff;
      padding: 12px 20px;
      b {
        display: block;
        font-size: 18px;
        letter-spacing: 2px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgb(216, 216, 216);
      }
      .right_all {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .right_content {
          width: 250px;
          height: 350px;
          text-align: center;
          border-radius: 10px;
          background: #fff;
          box-shadow: rgb(214, 212, 212) 0px 0px 10px; //将h-shadow,v-shadow设为0px,实现四周阴影
          img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-top: 50px;
            // border: 1px solid orange;
            box-shadow: rgb(201, 200, 200) 0px 0px 10px;
          }
          ul {
            margin-top: 20px;
            // background: orange;
            li {
              display: flex;
              padding-left: 80px;
              font-size: 15px;
              letter-spacing: 1px;

              p {
                color: #2f2f2f;
                font-size: 17px;
                margin-top: 5px;
              }
              span {
                color: rgb(133, 132, 132);
                margin-left: 10px;
                margin-top: 8px;
              }
              a {
                color: red;
                margin-left: 5px;
              }
              button {
                padding: 5px 25px;
                margin-top: 25px;
                border-radius: 5px;
                margin-left: -5px;
                background: #2984f8;
                color: #fff;
                font-size: 15px;
                letter-spacing: 1px;
                border: 1px solid #2984f8;
              }
            }
          }
        }
      }
    }
  }
  .tab {
    height: 400px;
    background: #fff;
    margin-top: 10px;
    border-radius: 10px;
    padding: 5px 10px;
    b {
      font-size: 19px;
      padding: 12px 10px;
      display: block;
      width: 100%;
      // background: pink;
      letter-spacing: 2px;
      border-bottom: 1px solid #7a7979;
    }
    .tables {
      height: 300px;
      border-radius: 10px;
      margin-top: 20px;
      font-size: 15px;
      text-align: center !important;
    }
  }
}
</style>